<template>
  <div class="stepper-btn-wrapper">
    <mu-button
      v-if="activeStep !== 0 && showPrev"
      round
      color="primary"
      @click="changeStep(activeStep - 1)"
      >上一步</mu-button
    >
    <mu-button
      v-if="activeStep !== len - 1"
      round
      color="primary"
      @click="changeStep(activeStep + 1)"
      >下一步</mu-button
    >
    <mu-button v-if="finish" round color="primary" @click="complete">
      完成
    </mu-button>
  </div>
</template>

<script>
export default {
  props: {
    len: Number,
    activeStep: Number,
    showPrev: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    finish() {
      return this.activeStep === this.len - 1;
    },
  },
  methods: {
    changeStep(index) {
      this.$emit("changeStep", index);
    },
    complete() {
      this.$emit("complete");
    },
  },
};
</script>

<style scoped>
.stepper-btn-wrapper {
  display: flex;
  justify-content: space-around;
  margin: 10px auto;
}
</style>
